import { View, Button, StyleSheet } from 'react-native';
import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';

const styles = StyleSheet.create({
  box: {
    padding: 8,
    margin: 8,
    height: 50,
    width: 50,
    backgroundColor: "#b58df1",
    borderRadius: 4
  }
});

export default function ReanimatedAnimatingStylesPage() {
  const translateX = useSharedValue(0);

  const handlePress = () => {
    translateX.value += 50;
  };

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateX: withSpring(translateX.value * 2) }],
  }));

  return (
    <View>
      <Animated.View style={[styles.box, animatedStyles]} />
      <Button onPress={handlePress} title="Click me" />
    </View>
  )
}